<template>
	<view 
		class="schoolIntro" 
		:style="{backgroundImage: 'url(' + data.backgroundImage + ')'}"
	>
		<!-- 页面上面-学校基本信息 -->
		<view class="schoolIntroTop">
			
			<!-- 学校名称 -->
			<view class="schoolIntroName">
				<text class="schoolIntroNameText">{{data.schoolName}}</text>
			</view>
			
			<!-- 类别 -->
			<view class="schoolIntroType">
				<text>{{data.deparment}}</text> |
				<text>{{data.type1}}</text> |
				<text>{{data.educationalLevel}}</text> |
				<text>{{data.type2}}</text>
			</view>
			
			<!-- 按钮 收藏分享 -->
			<view class="schoolIntroTopLast">
				<text>{{data.is985}}</text>
				<text>{{data.is211}}</text>
				<text class="iconfont" style="font-size:36rpx;">&#xe6ea;</text>
				<text>收藏</text>
				<text class="iconfont" style="font-size:34rpx;">&#xe655;</text>&nbsp;
				<text>分享</text>
			</view>
		</view>
		
		<!-- 下面-白色区域 -->
		<view class="schoolIntroBottom">
			<!-- 内容区 -->
			<view class="schoolIntroBottomCon">
				
				<!-- 院校地址 -->
				<view class="schoolIntroTitle">
					<!-- 图标 和 标题 -->
					<view class="schoolIntroTitleCon">
						<image src="/static/school/icon1.png" mode="aspectFit"></image>
						<text>院校地址</text>
					</view>
					<!-- 内容 -->
					<view class="schoolIntroCon">{{data.schoolAddress}}</view>
				</view>
				
				<!-- 双一流学科 -->
				<view class="schoolIntroTitle">
					<!-- 图标 和 标题 -->
					<view class="schoolIntroTitleCon">
						<image src="/static/school/icon2.png" mode="aspectFit"></image>
						<text>双一流学科</text>
					</view>
					<!-- 内容 -->
					<view class="schoolIntroCon">{{data.subjectCon}}</view>
				</view>
				
				<!-- 国家特色专业 -->
				<view class="schoolIntroTitle">
					<!-- 图标 和 标题 -->
					<view class="schoolIntroTitleCon">
						<image src="/static/school/icon3.png" mode="aspectFit"></image>
						<text>国家特色专业</text>
					</view>
					<!-- 内容 -->
					<view class="schoolIntroCon">{{data.specialty}}</view>
				</view>
				
				<!-- 专业 -->
				<view class="schoolIntroTitle">
					<!-- 图标 和 标题 -->
					<view class="schoolIntroTitleCon">
						<image src="/static/school/icon4.png" mode="aspectFit"></image>
						<text>专业</text>
					</view>
					<!-- 内容 -->
					<view class="schoolIntroCon">{{data.major}}</view>
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script lang="ts" setup>
	import {ref} from "vue";
	
	const ipt_content = ref("");
	const data = ref({
		backgroundImage:'/static/school/schoolBg.png',
		schoolName:'北京大学',
		deparment:'教育部',
		type1:'综合',
		educationalLevel:'普通本科',
		type2:'双一流',
		is985:'985',
		is211:'211',
		schoolAddress:'学校地址:北京市海淀区颐和园路5号',
		subjectCon:'哲学、理论经济学、应用经济学、法学、政治学、社会学、马克思主义理论、心理学、中国语言文学、外国语言文学、考古学、中国史、 世界史、数学、物理学、化学、地理学、地球 物理学、地质学、生物学、生态学、统计学、力学、材料科学与工程、电子科学与技术、控制科学与工程、计算机科学与技术、环境科学与工程、软件工程、基础医学、临床医学、口腔医学、公共卫生与预防医学、药学、护理学艺术学理论、现代语言学、语言学、机械及 航空航天和制造工程',
		specialty:'考古学、生物科学、化学、电子信息科学与技术、智能科学与技术、软件工程、经济学、环境工程、法学、西班牙语、阿拉伯语、地质学、临床医学、 口腔医学、哲学、信息与计算科学、药学、保险学、城市管理、汉语言文学、预防医学、地球物理学、环境科学、国际政治、波斯语、印地语、乌尔都语、新闻学、世界史、金融学、理论与应用力学、菲律宾语微电子科学与工程、蒙古语、能源与环境系统工程',
		major:'心理学、信息管理与信息系统、地理信息科学、英语、日语、市场营销、会计学、广播电视学、应用化学、天文学、城乡规划、社会学、葡萄牙语、护理学、德语、 法语、泰语、缅甸语、核物理、艺术史论、编辑出版学、朝鲜语、历史学、印度尼西亚语文物与博物馆学文物保护技术、物理学、地球化学广告学、宗教学、 财政学、古典文献学、应用语言学、大气科学、图书馆学、俄语、越南语、空间科学与技术、材料化学、生态学、工程力学、基础医学,资源与环境经济学、人类学、梵语巴利语、希伯来语、政治学、经济学与哲学、古生物学、外国语言与外国历史、整台科学、人工智能、 传播学、国际经济与贸易、材料科学与工程、数学与应用数学、生物技术、计算机科学与技术、社会工作、应用心理学、马克思主义理论、医学检验技术、生物信息学、大数据管理与应用、行星科学、应用统计学、化学、生物学、集成电路设计与集成系统、航空航天工程、生物医学工程、自然地理与资源环境、人文地理与城多规划、汉语言、逻辑学、外交学'
	})
</script>

<style scoped>
	@import url('../../static/fonts2/iconfont.css');
</style>
<style scoped>
/* 设置背景图的 */
.schoolIntro {
	width: 100%;
	/* height: 100vh; */
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	padding-bottom: 110rpx;
}
/* 页面上面-学校基本信息 */
.schoolIntroTop {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 70rpx 30rpx 80rpx 35rpx;
}

/* 学校名称-文字 */
.schoolIntroNameText {
	color: #fff;
	font-size: 46rpx;
	font-weight: bold;
}
/* 类别 */
.schoolIntroType {
	color: #fff;
	font-size: 28rpx;
	padding: 10rpx 0;
}
/* 按钮 收藏 分享 */
.schoolIntroTopLast {
	display:flex;
	align-items: center;
	margin-top: 15rpx;
	color: #fff;
}
/* 985 */
.schoolIntroTopLast text:nth-child(1) {
	padding: 8rpx 26rpx;
	background:#ffeeeb;
	color: #fe6f52;
	border-radius: 10rpx;
	margin-right: 20rpx;
	font-size: 26rpx;
}
/* 211 */
.schoolIntroTopLast text:nth-child(2) {
	padding: 8rpx 26rpx;
	background:#eaecfc;
	color: #2f58f2;
	border-radius: 10rpx;
	margin-right: 45rpx;
	font-size: 26rpx;
}
/* 收藏-文字 */
.schoolIntroTopLast text:nth-child(4) {
	font-size: 28rpx;
	margin-right: 50rpx;
}
/* 分享-文字 */
.schoolIntroTopLast text:nth-child(6) {
	font-size: 26rpx;
}

/* 下面-白色区域-容器 */
.schoolIntroBottom {
	width: 100%;
	padding: 0 30rpx;
	
}
/* 下面-白色区域-内容区 */
.schoolIntroBottomCon {
	width: 100%;
	background: #fff;
	/* height: 1500rpx; */
	border-radius: 26rpx;
	padding: 20rpx;
}
/* 院校地址 */
.schoolIntroTitle {
	display: flex;
	flex-direction: column;
	width: 100%;
	/* background: pink; */
	padding: 20rpx;
}
/* 内容区 */
.schoolIntroTitleCon {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-bottom: 30rpx;
	/* background: skyblue; */
}
/* 图片 */
.schoolIntroTitleCon image {
	width: 12%;
	height: 50rpx;
	margin-right: 10rpx;
	/* background: greenyellow; */
}
/* 文字 */
.schoolIntroTitleCon text {
	font-size:34rpx ;
	/* background: royalblue; */
}
.schoolIntroCon {
	color: #88919a;
}
</style>
